<!-- 分类资料定义：蹇泽阳 -->
<template>
  <div class="app-container">
    <div class="mt10 flex" style="width: 100%; background-color: white; align-items: center">
      <el-card shadow="never" class="table1" :body-style="{ padding: '20px' }">
        <div slot="header" class="f16">
          <el-input v-model="search" placeholder="快速查询" />
          <el-tree accordion class="tree mt24" :data="data" node-key="所有数据" :props="defaultProps" @node-click="handleNodeClick" />
        </div>
      </el-card>

      <!-- 中间箭头 -->
      <el-card shadow="never" :body-style="{ padding: '5px 10px 20px 0px' }" class="unBorder" style="margin-left: 15px">
        <div class="flex AIC" style="flex-direction: column; justify-content: center">
          <el-button
            type="primary"
            size="default"
            @click="moveTree('up')"
            class="ml12"
            style="width: 32px; height: 46px; background-color: #409eff; margin-bottom: 20px"
          >
            <span class="svg-container">
              <el-icon style="color: white; font-size: 22px"><Top /></el-icon>
            </span>
          </el-button>
          <el-button type="primary" size="default" @click="moveTree('done')" style="width: 32px; height: 46px; background-color: #9fceff; margin: 0">
            <span class="svg-container">
              <el-icon style="color: white; font-size: 22px"><Bottom /></el-icon>
            </span>
          </el-button>
        </div>
      </el-card>
      <!-- 右边 -->
      <el-card shadow="never" :body-style="{ padding: '5px 20px 5px' }" class="unBorder" style="transform: translateY(-25px)">
        <el-card shadow="never" :body-style="{ padding: '20px 40px 10px' }" style="margin-bottom: 30px">
          <el-form ref="form" label-width="120px" :inline="false">
            <el-form-item label="分类编码" class="f14">
              <el-input style="width: 300px" v-model="addDepartmentalDat" placeholder="请输入分类编码" />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input style="width: 300px" v-model="addDepartmentCode" placeholder="请输入分类名称" />
            </el-form-item>

            <el-form-item label="分类名称(英文)" class="f14">
              <el-input style="width: 300px" v-model="addDepartmentCodeEn" placeholder="请输入分类名称(英文)" />
            </el-form-item>
            <el-form-item label="" class="f14">
              <div class="flex">
                <el-button @click="ClickOne('add')" style="background-color: #409dfe; width: 60px; height: 32px" type="warning" size="small"
                  >增加</el-button
                >
                <el-button
                  style="background-color: #ffffff; width: 60px; height: 32px; color: #606266; border: 1px solid #dcdfe6"
                  type="warning"
                  size="small"
                  @click="ClickOne('del')"
                  >删除</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 40px 10px' }" style="margin-bottom: 30px">
          <el-form ref="form" label-width="120px" :inline="false">
            <el-form-item label="分类编码" class="f14">
              <el-input style="width: 300px" v-model="DepartmentalDat" disabled />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input style="width: 300px" v-model="DepartmentCode" disabled />
            </el-form-item>

            <el-form-item label="备注" class="f14">
              <el-input style="width: 300px" v-model="remark" disabled />
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" :body-style="{ padding: '20px 40px 10px' }">
          <el-form ref="form" label-width="120px" :inline="false">
            <el-form-item label="分类编码" class="f14">
              <el-input style="width: 300px" v-model="DepartmentalDat" placeholder="请输入分类编码" disabled />
            </el-form-item>

            <el-form-item label="分类名称" class="f14">
              <el-input style="width: 300px" v-model="DepartmentCode" placeholder="请输入分类名称" disabled />
            </el-form-item>

            <el-form-item label="主辅料" class="f14">
              <el-select v-model="department" placeholder="主辅料" @change="changeDepartment" :disabled="disabledDepartment">
                <el-option v-for="item in DepartmentType" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>

            <el-form-item label="分类名称(英文)" class="f14">
              <el-input style="width: 300px" @blur="changeDepartment" v-model="DepartmentCodeEn" placeholder="请输入分类名称(英文)" />
            </el-form-item>

            <el-form-item label="领用单位" class="f14">
              <el-select
                style="width: 300px"
                @change="changeDepartment"
                :disabled="disabledDepartment"
                v-model="businessAccounting"
                placeholder="领用单位"
              >
                <el-option v-for="item in AccountingType" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="分码" class="f14">
              <el-checkbox @change="changeDepartment" :disabled="disabledDepartment" size="default" v-model="sizeFlag" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ClassifiedDataDefinition1'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted, watch } from 'vue'

import { AllDepartmentData, type AllDepartments } from '@/api/GeneralManager/SystemManagement/DepartmentInformation'

//获取所有部门资料
onMounted(() => {
  DepartmentalData()
})
const search = ref('')
watch(search, () => {
  DepartmentalData()
})
const DepartmentalData = debounce(async () => {
  // TODO: 接口没有查询入参
  let resolve = await service.get('/MaterialManagement/getAssortList')
  data.value = resolve
}, 500)
interface Tree {
  children?: Tree[]
  levelCode: string
  oldLevel: string
  parentLevel: string
  typeName: string
  typeNo: string
}

const data = ref<any>([])

// 部门代码
const DepartmentCode = ref<string>('')

// 部门资料
const DepartmentalDat = ref<string>('')
const remark = ref('')
// 部门类型
const DepartmentType = ref([
  { id: 'P', name: '冲裁主料' },
  { id: 'M', name: '冲裁辅料' },
  { id: 'J', name: '针车辅料' },
  { id: 'Z', name: '' }
])

// 核算类型
const AccountingType = ref([
  { id: 'Y', name: '冲裁' },
  { id: 'N', name: '外协' },
  { id: 'J', name: '电脑车' },
  { id: 'D', name: '针车' },
  { id: 'A', name: '成型' },
  { id: 'Z', name: '' }
])

const currentNode = ref()
const handleNodeClick = async (data: Tree) => {
  currentNode.value = data
  let { typeName, typeNo, levelCode, parentLevel } = data
  if (parentLevel !== null && parentLevel.length === 2) {
    disabledDepartment.value = false
  } else {
    disabledDepartment.value = true
  }
  let res = await service.get<any, any>('/MaterialManagement/getAssortByTypeNo', {
    params: { typeNo }
  })
  DepartmentalDat.value = typeNo
  DepartmentCode.value = typeName
  department.value = res.mtlProperty
  remark.value = res.remark
  DepartmentCodeEn.value = res.engTypeName
  if (res.sizeFlag === 'Y') {
    sizeFlag.value = true
  } else {
    sizeFlag.value = false
  }
  // let departmentName = findNameById(DepartmentType.value, deptFlag!)
  // department.value = departmentName

  // let accountingName = findNameById(AccountingType.value, totalFlag!)
  // businessAccounting.value = accountingName
}

// 生产
const defaultProps = {
  children: 'children',
  label: 'typeName'
}
// 收集部门类型数据
const department = ref<string>('')
// 领用单位
const businessAccounting = ref<string>('')
// 分类英文名称
const DepartmentCodeEn = ref('')
// 分码
const sizeFlag = ref<any>(false)
const changeDepartment = async () => {
  let { typeName, typeNo, levelCode, parentLevel } = currentNode.value
  ElMessageBox.confirm('是否修改？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      if (sizeFlag.value === true) {
        sizeFlag.value = 'Y'
      } else {
        sizeFlag.value = ' '
      }
      let res = await LoginWork.put<any, any>('/MaterialManagement/getAssortUpdate', {
        yfMtlTypeNew: '', //	yfMtlTypeNew
        drawDept: businessAccounting.value, //	领用部门
        engTypeName: DepartmentCodeEn.value, //	英文分类名称
        levelCode: '', //	子节点
        mtlProperty: department.value, //	主辅料
        oldLevel: '', //
        oldParentLevel: '', //
        parentLevel: '', //	父节点
        remark: '', //	备注
        sizeFlag: sizeFlag.value, //	分码 默认空 Y是√
        typeName, //	种类名称
        typeNo //	种类代码
      })
      if (res.code === 200) {
        JMessage.success('修改成功')
      }
      if (sizeFlag.value === 'Y') {
        sizeFlag.value = true
      } else {
        sizeFlag.value = false
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改'
      })
      handleNodeClick(currentNode.value)
    })
}
// 判断下拉框是否禁用
const disabledDepartment = ref(true)

// 添加和删除
const addDepartmentalDat = ref('')
const addDepartmentCode = ref('')
const addDepartmentCodeEn = ref('')

const ClickOne = async (val: any) => {
  const regex = addDepartmentalDat.value.match(/^[A-Z]{1}\w+/g)
  if (val === 'add') {
    if (addDepartmentalDat.value === '' && addDepartmentCode.value === '' && addDepartmentCodeEn.value === '') {
      JMessage.warning('不能添加空数据')
    } else if (addDepartmentalDat.value === '' || addDepartmentCode.value === '') {
      JMessage.warning('分类编码和分类名称不能为空')
    } else if (!regex) {
      JMessage.warning('检查分类编码格式是否正确')
    } else {
      console.log(currentNode.value)
      let res = await LoginWork.post<any, any>('/MaterialManagement/getAssortAdd', {
        typeNo: addDepartmentalDat.value,
        typeName: addDepartmentCode.value,
        engTypeName: addDepartmentCodeEn.value,
        levelCode: currentNode.value ? currentNode.value.levelCode : '',
        parentLevel: currentNode.value ? currentNode.value.parentLevel : ''
      })
      JMessage.success(res.message)
      DepartmentalData()
    }
  } else if (val === 'del') {
    let res = await LoginWork.post<any, any>(`/MaterialManagement/getAssortDel?typeNo=${DepartmentalDat.value}`)
    if (res.code === 504) {
      JMessage.warning(res.message)
    } else {
      JMessage.success(res.message)
    }
    DepartmentalData()
  }
}

// 树结构上下移动
const moveTree = async (val: string) => {
  if (val === 'up') {
    await service.get('/MaterialManagement/getAssortUMoveUp', {
      params: {
        typeNo: DepartmentalDat.value
      }
    })
    JMessage.success('上移成功')
  } else {
    await service.get('/MaterialManagement/getAssortUMoveDown', {
      params: {
        typeNo: DepartmentalDat.value
      }
    })
    JMessage.success('下移成功')
  }
  DepartmentalData()
}
</script>

<style lang="less" scoped>
.unBorder {
  --el-card-border-color: none !important;
}
.el-card {
  --el-card-border-color: #dcdfe6;
}
.table1 {
  .tree {
    width: 200px;
    // border: 1px solid gray;
    height: calc(100vh - 220px);
  }
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

:deep(.el-select .el-input__wrapper) {
  width: 180px;
}
</style>
<style>
.app-main {
  background-color: white !important;
}
</style>
